<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .banner {
            position: relative;
            width: 100vmin;
            height: 60vmin;
            margin: 20vmin auto;
            background-color: #eee;
            overflow: hidden;
        }

        ul.slides {
            position: absolute;
            width: 500vmin;
            height: 60vmin;
            top: 0;
            left: 0;
            animation: run 15s infinite;
        }

        li.slide {
            width: 100vmin;
            height: 60vmin;
            float: left;
            background-size: 100vmin 60vmin;
            transition: 1s transform ease-in-out;
        }

        .slide:nth-of-type(1) {
            background-color: rgb(60, 179, 173);
            background-image: url(../轮播图（css3）/image2/youtu.jpg);
            left: 0;
        }

        .slide:nth-of-type(2) {
            background-color: rgb(203, 255, 173);
            background-image: url(../轮播图（css3）/image2/deliver.jpg);
            left: 100%;
        }

        .slide:nth-of-type(3) {
            background-color: rgb(60, 135, 179);
            background-image: url(../轮播图（css3）/image2/fast.jpg);
            left: 200%;
        }

        .slide:nth-of-type(4) {
            background-color: rgb(116, 60, 179);
            background-image: url(../轮播图（css3）/image2/JD1.jpg);
            left: 300%;
        }

        .slide:nth-of-type(5) {
            background-color: rgb(116, 60, 179);
            background-image: url(../轮播图（css3）/image2/youtu.jpg);
            left: 400%;
        }

        @keyframes run {
            0% {
                left: 0;
            }

            25% {
                left: -100vmin;
            }

            50% {
                left: -200vmin;
            }

            75% {
                left: -300vmin;
            }

            100% {
                left: -400vmin;
            }
        }
    </style>



    <div>
        <div class="banner">
            <ul class="slides">
                <li class="slide"></li>
                <li class="slide"></li>
                <li class="slide"></li>
                <li class="slide"></li>
                <li class="slide"></li>
            </ul>
        </div>
    </div>
</div>

